<template>
	<view class="page must_know" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
		<c-nav-bar :title="title" :showHome="false"></c-nav-bar>
		<view class="hander">
			<view class="search-input">
				<u-search placeholder="请输入门店名称" v-model="fineVal" animation='false' @blur='blur'
					@search='search'></u-search>
			</view>
			<swiper class="swiper" :circular="true" :autoplay="true" :interval="8000" :duration="200"
				style="height: 380rpx;">
				<swiper-item class="swiper-items" v-for="item, index in list" :key="index"
					@tap="toLbDetails(item.route)">
					<image class="image" style="width: 100%; height: 100%;" :src="item.path" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>

			<view class="category-main">
				<view class="category-main-container" v-for="item,index in categoryMain" :key='item.name'
					@click="goryclick(item)">
					<view class="image">
						<image :src="item.icon" mode="aspectFill"></image>
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>

		<view class="feature-three">
			<span class="left">推荐商家</span>
			<!-- <span class="right"> </u-icon></span> -->
			<span @click="navTabList" class="right">全部 <u-icon name="arrow-right" color='#AAAAAA'></u-icon></span>
		</view>
		<view class="list">
			<u-cell v-if="indexList.length > 0" class="spotList" @click="toHref(item)"
				v-for="(item, index) in indexList" :key="index">
				<u-avatar slot="icon" shape="square" size="200" :src="item.storeFrontPic.split(',')[0]"
					customStyle="border-radius:16rpx"></u-avatar>
				<view class="right" slot="title">
					<view class="p1">{{item.name}}</view>
					<view class="p2">
						<u-rate :count="count" size='33rpx' :value="item.score||5" allowHalf="true"
							activeColor='#ff8f23' readonly></u-rate>
						<view class="renjun1">
							{{item.score||5}}分
						</view>
						<view class="renjun2">
							¥{{item.personPrice}}/人
						</view>
					</view>
					<view class="p5">
						<view class="price1">
							{{item.categorytext}}
						</view>
						<view class="price2">
							{{item.islandName}}
						</view>
					</view>
					<view class="p4" v-for="(item1,index1) in item.products" :key="index1">
						<block v-if="index1<2">
							<view class="money">惠</view>
							<view class="price1">
								<span class="span">￥</span> {{item1.discountPrice}}
							</view>
							<view class="price2">
								<span class="span"
									style="text-decoration: line-through">￥{{item1.price}}</span><del></del>
							</view>
							<view class="price3">
								<u--text :lines="1" :text="item1.name"></u--text>
							</view>
						</block>
					</view>

				</view>
			</u-cell>

			<nodata v-if="indexList.length === 0"></nodata>
		</view>

		<uni-load-more :status="status" color="#007aff" />
	</view>
</template>

<script>
	import parse from '../../../uni_modules/uview-ui/libs/config/props/parse';
	import nodata from '@/compoments/NoData/index.vue'
	import uniLoadMore from '@/compoments/load-more/index.vue'
	export default {
		components: {
			nodata
		},
		data() {
			return {

				title: '餐饮美食',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				fineVal: '', //餐饮搜索
				status: 'more', //加载状态
				categoryMain: [],
				imgCfg: {
					'本地特色': 'https://i.ringzle.com/file/20231125/d963086e6de64c4c9db651e7e83c4fc9.png',
					'地方菜系': 'https://i.ringzle.com/file/20231125/fad7a799d6a942039c1aa8db5ea5b75d.png',
					'海鲜排挡': 'https://i.ringzle.com/file/20231125/a314703e463d43c7808714d1b29632ad.png',
					'风味小吃': 'https://i.ringzle.com/file/20231125/fae54d6d2b014e3ba242bec5c8606e5a.png',
					'火锅烤肉': 'https://i.ringzle.com/file/20231125/264588da41114331a4d539cf48815aaf.png'
				},
				count: 5,
				num: 4,
				passengerDefault: [0],
				currentNum: null,
				sortVal: '智能排序',
				sortShow: false,
				sort: [
					['默认排序', '好评优先', '距离优先', '高价优先', '低价优先', '星级']
				],
				areaVal: '全部区域',
				areaShow: false,
				area: [
					['全部']
				],
				titleStyle: {

					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#333333"
				},

				pricesort: 0, //降序
				list: [
					{path:'https://fsy.shengsi.gov.cn/file/20240730/71a5a2c826a44fcfb1cfb0bf7cf50de4.png',route:''}
				],
				indexList: [],
				fromData: {
					limit: 10,
					page: 1,
					foodType: '', //（餐饮类型: 字典
					intellectSort: '', //（智能排序：1默认排序 2好评优先 3距离优先 4高价优先 5低价优先
					islandId: '', //（所属岛屿id
					merchantCategory: 4, //（商户分类: 字典MerchantCategory
					name: '', //（商户名称
					status: 1, //（状态: 1审核通过 2:待审核 4:审核未通过
				},
				fromList: {
					limit: 10,
					page: 1,
				},
				AddressList: [],
				tabList: {},
				categorytext: '',
			}
		},
		onLoad() {
			this.getLbList();
			this.getHousekeeping();
			this.getList()
			this.getRooms()
		},
		//下拉刷新
		// onPullDownRefresh() {},
		//上拉加载
		onReachBottom() {
			if (this.status != 'noMore') {
				this.status = 'loading'
				this.getRoomsList()
			}
		},
		methods: {
			toLbDetails(url) {
				console.log(url);
				if (!url) return
				if (uni.getStorageSync('spid_old')) uni.removeStorageSync('spid_old');
				if (uni.getStorageSync('price_old')) uni.removeStorageSync('price_old');
				uni.navigateTo({
					url
				})
			},
			getLbList() {
				this.$api.get('/sys/isappletpic/queryBannerByType/7').then(res => {
					if (res.data.code === 0) {
						let list = res.data.data.bannerList.map(b => {
							return {
								path: b.path,
								route: b.linkUri
							}
						});
						if (list.length > 0) this.list = list;

					}
				})
			},
			async getRooms() {
				let hcs = await this.getHousekeeping();
				this.$api.get('/api/merchant/food/page', this.fromData)
					.then(res => {
						this.indexList = res.data.data.list;

						this.indexList.forEach(item => {
							let t = hcs.find(h => h.dictValue == item.foodType);
							if (t) {
								item.categorytext = t.dictLabel
							}
						})

					})
			},
			async getHousekeeping() {
				return new Promise((resolve, reject) => {
					this.$api.get('/sys/dict/type/all').then(res => {
						if (res.data.code === 0) {
							let alldata = res.data.data.find((p) => p.dictType == 'food_type')
								.dataList;
							this.categoryMain = alldata.map((item, index, arr) => {
								let json = {};
								json.name = item.dictLabel;
								json.type = item.dictValue;
								json.icon = this.imgCfg[item.dictLabel];
								return json
							})
							resolve(alldata);
						} else reject()
					})
				})
			},

			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			// 去特色美食详情
			tabListDetails(item) {
				uni.navigateTo({
					url: "/pagesTrip/fineFood/details/tabListDetails?list=" + encodeURIComponent(JSON.stringify({
						...item
					}))
				})
			},
			// 全部商家
			navTabList() {
				uni.navigateTo({
					url: '/pagesTrip/fineFood/fineFood/shangjialist'
				})
			},
			// 推荐商家
			navIndexList() {
				uni.navigateTo({
					url: '/pagesTrip/fineFood/fineFood/fineFoodList'
				})
			},

			// 搜索
			search(e) {

				this.fromData.page = 1
				this.fromData.name = e
				this.fromData.type = ''
				this.getRooms()
				// this.fineVal = ''
			},
			// 搜索
			blur(e) {
				this.fromData.page = 1
				this.fromData.name = e
				this.fromData.type = ''
				this.getRooms()
				// this.fineVal = ''
			},

			// 选择菜品
			goryclick(item) {
				this.fromData.type = item.type
				let list = {
					type: item.type,
					name: item.name
				}
				uni.navigateTo({
					url: '/pagesTrip/fineFood/fineFood/shangjialist?typeList=' + JSON.stringify(list)
				})
				// this.fromData.page = 1
				// this.getRooms()
				// uni.reLaunch({
				// 	url: '/pages/index/index'
				// })

			},
			// returnBack() {
			// 	uni.reLaunch({
			// 		url: '/pages/index/index'
			// 	})
			// },
			getRoomsList() {
				let that = this
				this.$api.get('/api/merchant/food/page', this.fromData)
					.then(res => {
						if (res.data.code === 0) {
							that.fromData.page++;
							let {
								list,
								total
							} = res.data.data;
							if (that.indexList.length + list.length > total || list.length == 0)
								return that.isOver = true;
							that.indexList = [...that.indexList, ...list];
						} else that.$showToast(res.data.msg);
					})
			},

			getList() {
				this.$api.get('/api/isspecialfood/page', this.fromList)
					.then(res => {
						this.tabList = res.data.data.list;
					})
			},
			//智能排序
			sortConfirm(e) {
				this.fromData.page = 1
				if (e.value[0] == '默认排序') {
					this.fromData.orderField = ''
					this.getRooms();
				} else if (e.value[0] == '好评优先') {
					this.fromData.orderField = 'SCORE'
					this.getRooms();
				} else if (e.value[0] == '距离优先') {
					this.fromData.orderField = 'DISTANCE'
					this.getRooms();
				} else if (e.value[0] == '高价优先') {
					this.fromData.orderField = 'MIN_PRICE_HIGH'
					this.getRooms();
				} else if (e.value[0] == '低价优先') {
					this.fromData.orderField = 'MIN_PRICE_LOW'
					this.getRooms();
				} else if (e.value[0] == '星级') {
					this.fromData.orderField = 'star'
					this.getRooms();
				}
				// this.passengerDefault = e.indexs;

				this.sortShow = false;
			},
			//选择区域
			areaConfirm(e) {
				this.fromData.page = 1
				this.passengerDefault = e.indexs;

				if (e.value[0] !== '全部') {
					// this.fromData.areaCode = e.value[0];
					this.AddressList.forEach(item => {
						if (item.scenicName == e.value[0]) {
							this.fromData.areaCode = item.id
						}
					})
					this.getRooms();
				} else if (e.value[0] == '全部') {
					this.fromData.areaCode = '';
					this.getRooms();
				}

				this.indexList = [];
				this.areaShow = false;
			},
			//关闭区域选择框
			onClose() {
				this.$set(this, 'sortShow', false)
			},
			// api/scenic/selectScenicList
			// 获取区域
			getselectScenicList() {
				this.$api.get('api/scenic/selectScenicList').then(res => {
					this.AddressList = res.data.data
					this.AddressList.forEach(item => {
						this.area[0].push(item.scenicName)
					})
				})
			},
			//跳转详情
			toHref(item) {
				uni.navigateTo({
					url: "/pagesTrip/fineFood/details/details?list=" + encodeURIComponent(JSON.stringify({
						...item
					}))
				})
			},

		}
	}
</script>
<style lang="less">
	::v-deep .u-text__value.u-line-1{
		font-family: PingFangSC, PingFang SC;
		font-weight: 400 !important;
		font-size: 24rpx !important;
		color: #333333 !important;
		text-align: center;
		font-style: normal;
		padding-left: 10rpx;
		text-align: left;
	}
	
	.p4 {
		display: flex;
		align-items: center;
		padding-bottom: 5rpx;

		.money {
			width: 20rpx;
			height: 28rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 20rpx;
			color: #FF7D01;
			line-height: 28rpx;
			text-align: right;
			font-style: normal;
		}

		.price1 {
			height: 28rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #FF3E3E;
			line-height: 28rpx;
			text-align: center;
			font-style: normal;
			padding: 0 10rpx;

			.span {
				width: 20rpx;
				height: 28rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 20rpx;
				color: #FF3E3E;
				line-height: 28rpx;
				text-align: center;
				font-style: normal;
			}
		}

		.price2 {
			.span {
				height: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #999990;
				line-height: 28rpx;
				text-align: center;
				font-style: normal;
				text-decoration-line: line-through;
			}
		}

		.price3 {
			height: 28rpx;
			line-height: 28rpx;
		}
	}

	.p5 {
		display: flex;
		margin-bottom: 16rpx;

		.price1 {
			height: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #777777;
			line-height: 24rpx;
			text-align: left;
			font-style: normal;
			padding-right: 10rpx;
		}

		.price2 {
			height: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #777777;
			line-height: 24rpx;
			border-left: 1px solid #777777;
			text-align: left;
			font-style: normal;
			padding-left: 10rpx;
		}
	}

	.renjun2 {
		// height: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		// line-height: 32rpx;
		text-align: left;
		font-style: normal;
	}

	.renjun1 {
		// height: 24rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #FEA400;
		// line-height: 32rpx;
		text-align: left;
		font-style: normal;
		margin: 0 25rpx 0 5rpx;
	}

	.u-cell__body {
		// padding: 24rpx !important;
		background-color: #fff !important;
		margin: 10rpx 18rpx !important;
		border-radius: 16rpx !important;
	}

	.u-line {
		border-color: #f5f9fa !important;
	}

	.u-scroll-list__indicator__line {
		height: 0 !important;
	}

	.u-scroll-list {
		padding-bottom: 0 !important;
	}

	.u-search {
		border: 1rpx solid #EFEFEF !important;
		background-color: #fff !important;
		border-radius: 100rpx;

		.u-search__content {
			height: 64rpx !important;
			background-color: #fff !important;

			.u-icon__icon {
				font-size: 40rpx !important;
			}

			.u-search__content__input {
				background-color: #fff !important;
			}
		}
	}
</style>
<style scoped lang="scss">
	::v-deep .u-avatar__image--square {
		border-radius: 16rpx !important;
	}

	.feature-three {
		padding: 16rpx 24rpx 0;
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			font-size: 36rpx;
			font-weight: 600;
			color: #111;
		}

		.right {
			color: #AAAAAA;
			font-size: 24rpx;
			display: flex;
			align-items: center;

		}

	}


	.content {
		padding: 24rpx 24rpx 0;

		.content-list {
			.card {
				border-radius: 20rpx;
				width: 280rpx;
				height: 340rpx;
				margin: 20rpx 10rpx 15rpx;
				background-color: #fff;
				// box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);

				.image {
					border-radius: 20rpx;
					width: 280rpx;
					height: 254rpx;

					image {
						border-radius: 20rpx;
						width: 100%;
						height: 100%;
					}
				}

				.text {
					font-size: 28rpx;
					color: #111111;
					font-weight: Bold;
					width: 100%;
					height: 84rpx;
					line-height: 84rpx;
					text-align: center;
				}
			}

		}
	}




	.page {
		width: 100vw;
		box-sizing: border-box;
		background-color: #f5f9fa;

	}

	.hander {
		padding: 24rpx !important;
		box-sizing: border-box;
		background-color: #fff;
	}

	.search-input {
		// width: ;
		height: 64rpx;
		// padding: ;
		margin-bottom: 20rpx;

	}

	.category-main {
		// margin-top: 10rpx;
		// width: 702rpx;
		min-height: 150rpx;
		background: #ffffff;
		border-radius: 16rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		// align-content: center;
		.category-main-container {
			width: 90rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex-shrink: 2;
			flex-basis: 20%;
		}

		.image {
			height: 78rpx;
			width: 78rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.category-main-container text {
			margin-top: 5rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}

	.spotList {
		padding: 25rpx;
		box-sizing: border-box;
	}



	.uni-page-head {
		z-index: 1;
	}

	.u-sticky {
		top: 88rpx !important;
	}

	.searchCondition {
		// position: relative;
		background-color: #f5f9fa;
		// margin-top: 8rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		height: 40rpx;
		padding-top: 30rpx;

		.item {
			margin: 0 auto;

			.u-icon {
				justify-content: center;
			}
		}

	}


	.right {
		margin-left: 26rpx;

		.p1 {
			color: #111111;
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			text-overflow: ellipsis;

		}

		.p2 {
			display: flex;
			margin: 16rpx 0;
			align-items: center;
		}

		.p3 {
			text {
				display: inline-block;
				padding: 6rpx;
				background-color: #fff6e6;
				font-size: 22rpx;
				color: #FF7D01;
				margin-bottom: 18rpx;
				border-radius: 4rpx;
			}
		}


	}

	.sortBox {
		.tit {
			font-size: 32rpx;
			color: #333;
			text-align: center;
			margin-bottom: 40rpx;
			margin-top: 64rpx;
		}

		.sort {
			padding: 0 24rpx 40rpx;
			background-color: #fff;
			display: grid;
			gap: 40rpx 26rpx;
			grid-template-columns: auto auto auto auto;
			margin-bottom: 44rpx;

			text-align: center;

			text {
				background-color: #F5F8FA;
				border-radius: 16rpx;
				font-size: 24rpx;
				color: #666;
				height: 64rpx;
				line-height: 64rpx;
				// box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
				box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);

				&.on {
					background-image: linear-gradient(to right, #0EBFFE, #00D3E8);
					color: #fff;
				}
			}
		}

		.btns {
			display: grid;
			padding: 0 30rpx 40rpx;
			gap: 0 20rpx;
			grid-template-columns: auto auto;

			.u-button--large {
				width: 94%;
				height: 40px;
			}
		}
	}
</style>